/* 
  product的子路由detail，商品详情
*/

import React from 'react'
import { Card,List,Button,Image } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';

import './Detail.css'

const { Item } =List

export default function Detail(props) {

  console.log('Detail')
  console.log(props)
  const {name,desc,price,category,imgs,detail}=props.location.state

  const title=(<span style={{fontSize:'20px',font:'bold 24px 宋体'}}> <Button type='link' onClick={()=>props.history.go(-1)}><ArrowLeftOutlined style={{color:'#5fceb8',fontSize:'20px'}}/></Button> 商品详情</span>)

  return (
    <Card title={title}>
      <List bordered>
        <Item>
          <span className='item-title'>商品名称：</span>
          <span className='item-content'>{name}</span>
        </Item>
        <Item>
          <span className='item-title'>商品描述：</span>
          <span className='item-content'>{desc}</span>
        </Item>
        <Item>
          <span className='item-title'>商品价格：</span>
          <span className='item-content'>{'￥'+price}</span>
        </Item>
        <Item>
          <span className='item-title'>所属分类：</span>
          <span className='item-content'>{category.categories.join(' >> ')}</span>
        </Item>
        <Item>
          <span className='item-title'>商品图片：</span>
          <span className='imgs-wrap'>
            <Image.PreviewGroup>
              {
                imgs.map((i,index)=>{
                  console.log(i)
                  return <Image width={200} height={200} src={i} alt="img" key={index}/>
                })
              }
              
              {/* <Image width={200} height={200} src="https://g-search3.alicdn.com/img/bao/uploaded/i4/i3/2206656759860/O1CN01uxlOo92MhvuBdzTTl_!!0-item_pic.jpg_230x230.jpg_.webp" alt="img" /> */}
            </Image.PreviewGroup>
          </span>
        </Item>
        <Item>
          <span className='item-title'>商品详情：</span>
          <span className='item-content' dangerouslySetInnerHTML={{__html:detail}}></span>
        </Item>
      </List>
    </Card>
  )
}
